<template>
	<view class="container">
		<map :markers="ms"  id="nav" ref="nav" class="nav_map"></map>
		<view style="margin: auto">
			<view style="display:block" class="left">
			<view class="title">{{shopInfo.shopName}}</view>
			<view class="addr">{{shopInfo.zzjgAddress}}</view>
			</view>
			<view style="display:block" class="right">
				<image src="/static/images/order/icon_map.png" class="map-icon" @tap="function(){goShopAddr(shopInfo)}"></image>
			</view>
		</view>

	</view>

</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import { phone } from "@/config/index.js";
	export default {
		components: {
			listCell
		},
		data() {
			return {
				ms: [],
				mapContext:{},
				shopInfo:{},
				statusObj: {
					10: "待支付",
					20: "待出库",
					30:　"待收货",
					40: "待评价",
					50: "已完成",
					60: "退款中",
					70: "已退款",
					80: "已取消",
					90: "已取消（系统）"
				},
				order: {
					
				}
			}
		},

		async onLoad(options) {
			let {shopName,zlat,zlng,zzjgAddress,priZZJGID}= options;
			let marker = {
				id: priZZJGID,
				latitude: parseFloat(zlat),
				longitude: parseFloat(zlng),
				width: 30,
				height: 30
			}
			this.ms = []
			this.ms.push(marker)
			this.shopInfo = options
			console.log(zlat)
			let con = uni.createMapContext("nav", this);
				   con.moveToLocation({
					   longitude:parseFloat(zlng),latitude:parseFloat(zlat)
				}).then(()=>{
					console.log("22")
				   }).catch((re)=>{
				   	console.log(re)
				   })
				con.translateMarker(
				 {
				   markerId:priZZJGID, // 必填
					  destination:{
						  longitude:parseFloat(zlng),latitude:parseFloat(zlat) // 必填
					  }
				 })
			this.mapContext = con
		},
		methods: {
			goShopAddr(shopInfo){
				let {shopName,zlat,zlng,zzjgAddress}= shopInfo;
				console.log("asfsadf")
				this.mapContext.openMapApp({
					longitude:parseFloat(zlng),
					latitude:parseFloat(zlat),
					destination:zzjgAddress
				})
				// uni.openLocation(res=>{
				// 	console.log(res)
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: white;
	display: flex;
	flex-direction: column;
	.nav_map{
		width: 100%;
		height: 85%;
	}
	.left{
		display: block;
		float: left;
		width: 80%;
		padding: 0.2rem 0 0 0.5rem;
		margin-left: 0.5rem;
		.title{
			font-size: 1.2rem;
			font-weight: bold;
			margin-top: -0.3rem;
		}
		.addr{
			font-size: 0.8rem;
			color: grey;
		}
	}
	.right{
		display: block;
		float: right;
		width: 10%;
		margin: 0.6rem 1.5rem 0.5rem 0;
	}
}

.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20rpx 0;

	.service-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rem !important;
		font-size: $font-size-sm;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}	
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	.order-box {
		z-index: 10;
		height: 25vh;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 0 0 20rpx 0 rgba($color: #333, $alpha: 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $bg-color-white;
		flex-shrink: 0;
		
		.status-icon {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 30rpx;
		}
	}
}

.phone-icon, .map-icon {
	width: 64rpx;
	height: 64rpx;
}

.phone-icon {
	margin-right: 40rpx;
}

.border-dashed {
	border-bottom: 1rpx dashed $border-color;
}

.order-info {
	border-radius: 0 0 30rpx 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 30rpx;
}

.order-invoice {
	padding: 30rpx 40rpx;
	border-radius: 30rpx;
	box-shadow: 0 0 10rpx 0 rgba($color: #333, $alpha: 0.1);
	margin-bottom: 60rpx;
	background-color: #F6F6F6;
}

.jump-icon {
	width: 24rpx;
	height: 48rpx;
	margin-left: 20rpx;
}
</style>
